import { defineStore } from 'pinia'

/**
 * Pinia Store示例 - 03.state(选项式)
 * 
 * 这个文件展示了如何在选项式API中定义和使用state
 */

// 任务管理Store
export const useTaskStore = defineStore('tasks', {
  // state是一个返回初始状态的函数
  state: () => ({
    // 任务列表
    tasks: [
      { id: 1, title: '学习Vue基础', completed: true },
      { id: 2, title: '学习Pinia状态管理', completed: false },
      { id: 3, title: '开发一个项目', completed: false }
    ],
    // 过滤条件
    filter: 'all', // 'all', 'completed', 'active'
    // 下一个任务ID (用于新增任务)
    nextId: 4,
    // 用户信息
    user: {
      name: '张三',
      role: 'developer'
    },
    // 应用设置
    settings: {
      darkMode: false,
      notifications: true
    },
    // 加载状态
    loading: false,
    // 错误信息
    error: null
  }),

  actions: {
    /**
     * 添加新任务
     */
    addTask(title) {
      // 使用this访问state
      this.tasks.push({ 
        id: this.nextId++, 
        title, 
        completed: false 
      })
    },

    /**
     * 删除任务
     */
    removeTask(taskId) {
      const index = this.tasks.findIndex(task => task.id === taskId)
      if (index !== -1) {
        this.tasks.splice(index, 1)
      }
    },

    /**
     * 切换任务完成状态
     */
    toggleTask(taskId) {
      const task = this.tasks.find(task => task.id === taskId)
      if (task) {
        task.completed = !task.completed
      }
    },

    /**
     * 设置过滤条件
     */
    setFilter(filter) {
      this.filter = filter
    },

    /**
     * 更新用户信息
     */
    updateUser(userData) {
      // 使用$patch方法更新嵌套对象
      this.$patch({
        user: {
          ...this.user,
          ...userData
        }
      })
    },

    /**
     * 切换暗黑模式
     */
    toggleDarkMode() {
      // 使用$patch函数方式更新嵌套对象中的特定属性
      this.$patch((state) => {
        state.settings.darkMode = !state.settings.darkMode
      })
    },

    /**
     * 重置所有任务状态
     */
    resetTasks() {
      // 调用$reset方法重置整个state到初始状态
      this.$reset()
    },

    /**
     * 模拟加载任务
     */
    async fetchTasks() {
      this.loading = true
      this.error = null
      
      try {
        // 模拟API请求
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        // 模拟获取的数据
        const newTasks = [
          { id: 1, title: '从服务器加载的任务1', completed: false },
          { id: 2, title: '从服务器加载的任务2', completed: true }
        ]
        
        // 替换现有任务
        this.tasks = newTasks
        this.nextId = 3
      } catch (err) {
        this.error = '加载任务失败'
        console.error(err)
      } finally {
        this.loading = false
      }
    }
  }
})
